<template>
  <div class="login-container">
    <div class="bac">
    <el-card class="login-box">

      <template slot="header">
        月樱桃商城-系统登录
      </template>

      <el-form>
        <el-form-group>
          <el-form-item label="用户名" label-width="80px">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
        </el-form-group>

        <el-form-group>
          <el-form-item label="密码" label-width="80px">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>
        </el-form-group>

        <el-form-group>
          <el-button @click="loginHandle" type="success">登录</el-button>
        </el-form-group>

      </el-form>

    </el-card>
    <div v-show="errMsg.isShow">{{errMsg.message}}</div>

  </div>
  </div>
</template>

<script>
  export default {
    name: "Login3",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },errMsg:{
          message:'用户名或密码错误',
          isShow:false
        }
      }
    }, methods: {
      loginHandle() {
        var _this = this;
        this.axios({
          url: 'http://localhost:3000/user/login',
          method: 'get',
          params: {
            username: this.form.username,
            password: this.form.password
          }
        }).then(function (res) {
            if (res.data.flag){
              _this.$router.push('/layout')
            }else {
             // _this.errMsg.isShow=true;
              _this.$message({
                type:'error',
                  message:'用户名或者密码错误'
              })
            }

        })
      }
    }
  }
</script>

<style scoped>
  .login-box {
    width: 460px;
    margin-left: 500px;
    margin-top: 200px;
  }
  .bac {
    background-image: url("../../assets/mooncherry.jpg");
    height: 850px;
    background-size:cover;
    background-repeat: no-repeat;
    overflow: hidden;
  }


</style>
